<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        ul {
            display: flex;
            justify-content: center;
            margin-bottom: 1px;
        }

        ul li {
            width: 160px;
            height: 30px;
            background: skyblue;
            text-align: center;
            line-height: 30px;
        }

        ol {
            width: 320px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
        }

        ol li {
            width: 160px;
            height: 30px;
            border: 1px solid blue;
            box-sizing: border-box;
            text-align: center;
            line-height: 30px;
        }

        form {
            display: flex;
            justify-content: center;
            margin-bottom: 1px;
            margin-top: 15px;
        }

        form input {
            border: 0;
            outline: none;
            border: 1px solid gray;
            box-sizing: border-box;
            height: 30px;
            width: 130px;

        }

        button {
            width: 45px;
            height: 30px;
            border: 0;
            box-sizing: border-box;
            border-left: 0;
        }
    </style>
</head>

<body>
    <form>
        <input type="text" placeholder="姓名">
        <button>添加</button>
    </form>
    <ul>
        <li>ID</li>
        <li>姓名</li>
    </ul>
    <ol>

    </ol>

    <script src="./jquery.min.js"></script>
    <script>
        let index = 4
        let info = {
            id: index,
            name: ''
        }
        const users = JSON.parse(window.localStorage.getItem('users')) || []
        //渲染
        bind()
        function bind() {
            const users = JSON.parse(window.localStorage.getItem('users')) || []
            let str = ``
            $.ajax({
                url: './data.json',
                success: function (res) {
                    users.forEach(item=>{
                        res.push(item)
                    })
                    res.forEach(item => {
                        str += `
                        <li>${item.id}</li>
                        <li>${item.name}</li>
                    `
                    })
                    $("ol").html(str)
                    // console.log(res);
                },
                error: function (err) {
                    console.log(err);
                }
            })
        }

        $('button').click(function (e) {
            try {
                e.preventDefault()
            } catch {
                e.returnValue = false
            }
            const users = JSON.parse(window.localStorage.getItem('users')) || []
            const val = $('input').val().trim()
            let egxp = /^dmin|user|aaa.*$/
            if (val === '') return alert('此处不能为空')
            if (egxp.test(val)) return alert('不能出现user、admin、aaa关键词')
            info.name = val
            info.id = index++
            users.push(info)
            window.localStorage.setItem('users', JSON.stringify(users))
            bind()
        })
        
    </script>
</body>

</html>